<template>
  <div id="app" class="main-content">
    <div class="projects-container">
      <HelloWorld v-for="(item,i) in projectData" :key="i"
       :src = "item.src"
       :name="item.name"
       :desc="item.desc"
       :link="item.link"
       :tags="item.tags"
      />
    </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import data from './data.js'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      projectData: []
    };
  },
  mounted() {
    this.projectData = data
  },
}
</script>

<style lang="scss">
@import "~@/styles/main.scss";

#app {
  text-align: center;
  color: #2c3e50;
}
</style>
